<template>
    <div class="user-manage">
     <!-- 查询用户 -->
       <div class="query-form">
             <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="材料编码">
                <el-input v-model="formInline.idzhenpiList" placeholder="请输入材料编码" clearable />
              </el-form-item>
              <el-form-item label="材料名称">
                <el-input v-model="formInline.name" placeholder="请输入材料名称" clearable />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onChaxun">查询</el-button>
              </el-form-item>
            </el-form>
       </div>
       <!-- 用户信息列表 -->
       <div class="base-table" >
           <div class="action">
             <el-button size="small" type="primary" @click="userFormVisible = true" >新增</el-button>
             <el-button size="small" type="danger"  @click="rukuButton">出入库</el-button>
           </div>
 
           <el-table @selection-change="handleSelectionChange"
           ref="multipleTableRef" :data="tableData" style="width: 100%;height: calc(100vh - 215px);"  >
            <el-table-column type="selection" width="55"></el-table-column>
           <el-table-column  v-for="item in columns" show-overflow-tooltip :key="item.label" :label="item.label" :prop="item.prop" :width="item.width"/>
           <el-table-column label="操作" width="200">
             <template #default="scope">
              <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">入库</el-button> -->
              <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">生产</el-button> -->
               <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
               <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
             </template>
           </el-table-column>
         </el-table>
        </div>
 
        <!-- 新增材料弹窗 -->
        <el-dialog v-model="userFormVisible"  title="新增真皮材料" width="700" center>
          <el-form :model="addUserForm" class="demo-form-inline1">
            <el-form-item label="材料编码" label-width="120px" >
              <el-input v-model="addUserForm.idzhenpiList" placeholder="材料编码" clearable />
            </el-form-item>
            <el-form-item label="材料名称" label-width="120px">
              <el-input v-model="addUserForm.name" placeholder="请输入材料名称" clearable />
            </el-form-item>
            <el-form-item label="颜色" label-width="120px" >
              <el-input v-model="addUserForm.color" placeholder="请输入材料颜色" clearable />
            </el-form-item>
            <!-- <el-form-item label="颜色" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="材料类型" label-width="120px">
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="粗细" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item> -->
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="quxiaoUserForm">取消</el-button>
              <el-button type="primary" @click="querenUserForm">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>


         <!-- 编辑材料弹窗 -->
         <el-dialog v-model="editFormVisible" title="修改真皮材料" width="700" center>
          <el-form :model="editForm" class="demo-form-inline1">
            <el-form-item label="材料编码" label-width="120px" >
              <el-input v-model="editForm.idzhenpiList" placeholder="材料编码" clearable />
            </el-form-item>
            <el-form-item label="材料名称" label-width="120px">
              <el-input v-model="editForm.name" placeholder="请输入材料名称" clearable />
            </el-form-item>
            <el-form-item label="颜色" label-width="120px" >
              <el-input v-model="editForm.color" placeholder="请输入材料颜色" clearable />
            </el-form-item>
            <!-- <el-form-item label="颜色" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="材料类型" label-width="120px">
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="粗细" label-width="120px" >
              <el-input v-model="addUserForm.username" placeholder="请输入用户名" clearable />
            </el-form-item> -->
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="quxiaoEditForm">取消</el-button>
              <el-button type="primary" @click="querenEditForm">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>

         <!-- 材料入库弹窗 -->
         <el-dialog v-model="rukuFormVisible"  title="真皮材料入库" width="900" center>
          <el-form :inline="true" :model="churukuformInline" class="demo-form-inline">
              <el-form-item label="选择出入库" placeholder="选择"  clearable >
                <el-select
                  v-model="churukuformInline.type"
                  placeholder="选择"
                  clearable
                  @change="xuanzeType"
                >
                  <el-option label="入库" :value="0" />
                  <el-option label="出库" :value="1" />
                </el-select>
              </el-form-item>
            </el-form>
          <el-table :data="multipleSelection" style="padding: 20px;">
            <el-table-column prop="name" label="名字" width="500px"></el-table-column>

            <el-table-column prop="state" label="出入库类型" width="100px" >
             <template #default="scope">
              <el-select
                  v-model="scope.row.type"
                  placeholder="选择"
                  clearable
                  disabled
                >
                  <el-option label="入库" :value="0" />
                  <el-option label="出库" :value="1" />
                </el-select>
             </template>
            </el-table-column>

            <el-table-column prop="count" label="入库数量" width="200px">
             <template #default="scope">
               <el-input v-model="scope.row.count" clearable></el-input>
             </template>
           </el-table-column>
          </el-table>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="quxiaoUserForm">取消</el-button>
              <el-button type="primary" @click="querenRukuForm">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>





    </div>
 </template>
   
   <script setup>
   import { computed, onMounted, reactive, ref,toRaw } from 'vue'
   import {getCailiaoList} from "../../api/cailiao"
   import {getzhenpiList,addzhenpiList,deletezhenpiList,editzhenpiList,addzhenpiChuruList,addzhenpiOrderList} from "../../api/zhenpi"
 
   const centerDialogVisible = ref(false)
   //新增真皮材料
   const userFormVisible = ref(false)
   //修改真皮材料
   const editFormVisible = ref(false)

   //表格的ref
   const multipleTableRef = ref()
   //多选选中的集合的数组
   const multipleSelection = ref() 

   //入库表单显示按钮
   const rukuFormVisible = ref()





   const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(val)
}
 
   const tableData = ref([])

   //选择出入库的type
   const churukuformInline = ref({
    type:0
   })
// 选择触发函数
const xuanzeType = ()=>{
    console.log(churukuformInline.value.type)
    multipleSelection.value.forEach(item => {
        item.type = churukuformInline.value.type
    });

}
//出入库按钮触发的事件
const rukuButton = ()=>{
    rukuFormVisible.value = true
    multipleSelection.value.forEach(item => {
        item.type = churukuformInline.value.type
    });
}

   const formInline = ref({
     idzhenpiList:'',
     name:'',
   })
 
   const addUserForm = ref({
     username:"",
     password:"",
     state:""
   })

   const editForm = ref()
 
   const columns = reactive([
     {label:"材料编码",prop:"idzhenpiList",width:"90px"},
     {label:"材料名称",prop:"name",width:"300px"},
    //  {label:"厂家",prop:"changjia"},
     {label:"颜色",prop:"color",width:"80px"},
     {label:"原材",prop:"yuancaiCount",width:"80px"},
     {label:"绗缝",prop:"hangfengCount",width:"80px"},
     {label:"刺绣",prop:"cixiuCount",width:"80px"},
     {label:"验收",prop:"yanshouCount",width:"80px"},
    //  {label:"合计",prop:"type",width:"90px"},

    //  {label:"粗细",prop:"cuxi"},
    //  {label:"最后登录时间",prop:"lastLoginTime"},
   ])
 
   // 查询按钮
   const onChaxun = ()=>{

    //  const data = {bian:"20127504",name:'pppp'}
     const {...data}  = formInline.value
     console.log("开始查询",data)
     qGetUser(data)
   }
   
   const qGetUser = (data)=>{
    getzhenpiList(data).then(res=>{
         console.log(res)
         tableData.value = res.data
     })
   }
   
 
   
   const search = ref('')
   const filterTableData = computed(() =>
     tableData.filter(
       (data) =>
         !search.value ||
         data.name.toLowerCase().includes(search.value.toLowerCase())
     )
   )
   const handleEdit = (index,row) => {
     console.log(index, row)
     editFormVisible.value = true
     const {...data} = toRaw(row)
     console.log(data)
     editForm.value = data
   }
   const handleDelete = (index,row) => {
     console.log(index, row)
     const data = {}
     data.idzhenpiList = row.idzhenpiList
     deletezhenpiList(data).then(res=>{
        console.log(res)
        qGetUser()
     }).catch(err=>{
        console.log(err)
     })
   }
   
 
 // 取消新增用户并清空表单
 const quxiaoUserForm = ()=>{
   userFormVisible.value = false
   addUserForm.value = {}
 }
 // 取消编辑用户并清空表单
 const quxiaoEditForm = ()=>{
    editFormVisible.value = false
 }

 //确认新增用户
 const querenUserForm = ()=>{
   console.log(addUserForm.value)
   const data = addUserForm.value
   addzhenpiList(data).then(res=>{
     console.log(res)
     qGetUser()
   }).catch(err=>{
     console.log(err)
   })
   userFormVisible.value = false
   addUserForm.value = {}
 }

  //确认编辑用户
  const querenEditForm = ()=>{
   console.log(editForm.value)
   const data = toRaw(editForm.value)
   console.log(data)
   editzhenpiList(data).then(res=>{
     console.log(res)
     qGetUser()
   }).catch(err=>{
     console.log(err)
   })
   editFormVisible.value = false
 }
 
//确认入库表单
 const querenRukuForm = ()=>{
   console.log(multipleSelection.value)
   const data = multipleSelection.value
   addzhenpiChuruList(data).then(res=>{
    console.log(res)
    qGetUser()
   }).catch(err=>{
    console.log(err)
   })
   if(churukuformInline.value.type === 1){
    addzhenpiOrderList(data).then(res=>{
    console.log(res)
    qGetUser()
   })
   }
   rukuFormVisible.value = false

 }
 
   onMounted(()=>{
     qGetUser()
   })

       // 获取当前时间
  const dangqianTime = ()=>{
    const now = new Date()
    const year = now.getFullYear()
    const month = String(now.getMonth()+1).padStart(2,"0")
    const date = String(now.getDate()).padStart(2,"0")
    const hours = String(now.getHours()).padStart(2,"0")
    const minute = String(now.getMinutes()).padStart(2,"0")
    const second = String(now.getSeconds()).padStart(2,"0")
    // console.log(year)
    // console.log(year,month,date,hours,minute,second,'当前时间')
    const nowTime = `${year}${month}${date}${hours}${minute}${second}`
    // console.log(nowTime,'当前时间')
    return nowTime
  }
 
   </script>
 <style lang="scss" scoped>
 
 .query-form{
   background: #fff;
   border-radius: 5px;
   padding: 18px 20px 0;
 
 }
 .base-table{
   margin-top: 10px;
   padding: 10px;
   border-radius: 5px;
   background: #fff;
 }
    .addButton{
     margin-bottom: 10px;
    }
    .el-table{
     // border-top: 1px solid #bcbcbc;
    }
    .demo-form-inline .el-input {
   --el-input-width: 190px;
 }
 
 .demo-form-inline .el-select {
   --el-select-width: 200px;
 }
 .action{
   border-radius: 5px 5px 0px 0px;
   padding: 5px 0px 10px 20px;
   border-bottom: 1px solid #ece8ee;
 }
 
 .demo-form-inline1{
//    padding: 10px 40px;
padding-top: 10px;
  //  margin-left: 50%;
  //  transform: translateX(-50%);
 }
 
 .demo-form-inline1 .el-input {
   --el-input-width: 500px;
 }
 
 .demo-form-inline1 .el-select {
   --el-select-width: 220px;
 }
 </style>